<template>
  <div>
    <p>单价:{{price}}</p>
    <p>数量:{{count}}</p>
    <!-- 使用计算属性的方法和data中的属性一样，虽然它是函数，但不要加括号 -->
    <!-- 计算属性相对于函数优势在于有缓存 -->
    <!-- 缓存概念：计算机属性第一次运行被缓存依赖项不变直接从缓存取 -->
    <p>总价:{{total}}</p>
    <p>总价:{{total}}</p>
    <p>总价:{{total}}</p>
  </div>
</template>

<script>
export default {
  data(){
    return {
      price: 10,
      count: 20
    }
  },
  // 计算属性:
  // 场景: 一个变量的值, 需要用另外变量计算而得来
  /*
    语法:
    computed: {
      计算属性名 () {
        return 值
      }
    }
  */
 // 注意: 计算属性和data属性都是变量-不能重名
 // 注意2: 函数内变量变化, 会自动重新计算结果返回
  computed: {
    total(){
      console.log("计算属性");
      return this.price + this.count
    }
  }
}
</script>

<style>

</style>